Twind v1

はじめに

Twind v1がリリースされました

Twind v0.16と比較すると、よりモジュラーな構成へと変わっているようです

公式でv0.16からのマイグレーションガイドが公開されています

構成要素

Twind v1のコア機能を提供するパッケージ

Twindの設定ファイルで、@twind/coreのdefineConfig()を使って設定を定義することが想定されます

ここで定義した設定をアプリケーションのエントリポイントなどから読み込み、install()に渡すことで設定を有効化できます

Presets

@twind/coreでは各種ユーティリティクラスは提供されません

ユーティリティクラスは各種Presetsやtwind.config.jsなどから提供されます

Presetsの役割はカスタムのrulesとvariantsを提供することです

Twind公式の@twind/preset-tailwindを導入することで、Tailwind CSS v3互換のユーティリティが使用できるようになります

rules

クラス名からCSSの定義を生成します

variants

ユーティリティが有効化される状況を指定します

参考